<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo centered-menu-item"
      mode="horizontal"
      @select="handleSelect"
      background-color="#5199FD"
      text-color="#fff"
      active-text-color="#fff">
      <el-menu-item index="1" class="daohang" @click="jumpIndex">首页</el-menu-item>
      <el-menu-item index="1" class="daohang">车票</el-menu-item>
      <el-menu-item index="1" class="daohang">团购服务</el-menu-item>
      <el-menu-item index="1" class="daohang">会员服务</el-menu-item>
      <el-menu-item index="1" class="daohang">站车服务</el-menu-item>
      <el-menu-item index="1" class="daohang" @click="goods">铁路商城</el-menu-item>
      <el-menu-item index="1" class="daohang">出行指南</el-menu-item>
      <el-menu-item index="1" class="daohang" @click="myInfo">个人信息</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "second",
  data() {
    return {
      activeIndex2: ''
    }
  },
  methods: {
    handleClick() {
      alert('button click');
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    jumpIndex() {
      this.$router.push('/')
    },
    goods() {
      this.$router.push('/goods')
    },
    myInfo() {
      this.$router.push('/myInfo')
    }
  }
}
</script>

<style scoped>
.sou {
  margin-top: 25px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.centered-menu-item {
  display: flex;
  justify-content: center;
  background-color: #5199FD;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border: none;
}

.daohang {
  margin-left: 60px;
  line-height: 60px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
